<template>
	<view class="inner-component">
		<view class="" v-for="(item,index) in list">
			<view class="name"><text>{{ item.name}}</text></view>
			<view>
				<view class="page" v-for="(page,index) in item.pages" @click="goDetailPage(page)">{{ page }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const list = [
		{
			id: 'view',
			name: '视图容器',
			open: false,
			pages: [
				'view-component'
			]
		},
		{
			id: 'form',
			name: '表单组件',
			open: false,
			pages: [
				'button',
				'input'
			]
		},
		{
			id: 'media',
			name: '媒体组件',
			open: false,
			pages: [
				'image'
			]
		}
	]
	const goDetailPage = (page) => {
		uni.navigateTo({
			url: `/pages/component/${page}/${page}`
		})
	}
</script>

<style lang="scss">
	  .inner-component {
		  padding: 20rpx;
		  .name {
			  color: $uni-color-primary;
		  }
		  .page {
			  color: $uni-text-color;
			  font-size: 40rpx;
			  height: 80rpx;
			  line-height: 80rpx;
			  padding-left: 20rpx;
			  background-color: $uni-bg-color-grey;
		  }
	  }
</style>
